<template>
	<view class="login">
		<view class="login-nav">
			<view class="content">
				<span class="desc"></span>
			</view>
			<view class="login-form">
				<view class="form-top">账号绑定</view>
				<u--form class="form-main" :model="loginForm" :rules="rules" errorType="toast" ref="loginFormRef">
					<u-form-item label="" prop="username">
						<input v-model="loginForm.username" placeholder="账号" placeholder-class="ipt-place" />
					</u-form-item>
					<u-form-item label="" prop="password">
						<template>
							<input v-model="loginForm.password" :password="isPassword" placeholder="密码"
								placeholder-class="ipt-place" />
							<template slot="right">
								<u-icon :name="isPassword ? 'eye-off' : 'eye-fill'" color="#cdcfd1" size="28"
									@click="changeIspassword" />
							</template>
						</template>
					</u-form-item>
				</u--form>
				<view class="form-floor">
					<u-button :customStyle="btnCustomStyle" text="登 录" :loading="btnIsLoading"
						@click="handleLogin"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		offiacc
	} from '../../service/index.js'
	import {
		adminUserInfo
	} from '@/service/index.js'
	import axios from 'axios'
	import {
		BASEURL
	} from '@/constant/index.js'

	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					binding: 1,
					member_id: ''
				},
				options: {},
				token: '',
				isChecked: false,
				// 校验规则
				rules: {
					username: [{
						required: true,
						message: '账号不能为空',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					}]
				},
				// 登录按钮loading
				btnIsLoading: false,
				isPassword: true,
				// 登录按钮样式
				btnCustomStyle: {
					width: '620rpx',
					height: '100rpx',
					background: '#3C87F6',
					fontSize: '36rpx',
					color: '#FEFEFF',
					borderRadius: '20rpx',
					boxShadow: '0rpx 8rpx 16rpx 0rpx rgba(45,108,254,0.26)'
				}
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		onReady() {

		},
		onLoad(options) {
			this.options = options
			if (this.options.code) this.getToken()
		},
		methods: {
			async getToken() {
				// 获取token
				const res = await offiacc({
					code: this.options.code,
					appid: this.options.appid,
					content_id: ''
				})
				if (res.code === 200) {
					this.token = res.data.api_token
					this.loginForm.member_id = res.data.member_id
				}
			},
			// 显示与隐藏密码
			changeIspassword() {
				this.isPassword = !this.isPassword
			},
			// 跳转到协议页面
			openProtocolPage(type) {
				const option = JSON.stringify({
					type
				})
				uni.navigateTo({
					url: `/pages/agreement/agreement?opt=${option}`
				})
			},
			// 登录
			async handleLogin() {
				this.btnIsLoading = true

				try {
					// 校验
					await this.$refs.loginFormRef.validate()
					// 绑定
					axios({
						url: `${BASEURL}/admin/system.Login/login`,
						method: 'post',
						data: this.loginForm,
						headers: {
							'Content-Type': undefined
						}
					}).then(async (response) => {
						if (response.status === 200) {
							if (response.data.code === 200) {
								this.$showToast(response.data.data.binding ? '绑定成功,正跳转回首页...' : response
									.data.msg)
								setTimeout(async () => {
									if (response.data.data.binding) {
										await this.$store.dispatch('login/loginOut');
										window.location.href = `${window.location.origin}/user/#/?appid=${this.options.appid}`
									}
								}, 1500)
							}
							// 重复绑定
							else if (response.data.code === 1000) {
								this.$showToast('账号已绑定,请勿重复绑定')
								setTimeout(async () => {
									await this.$store.dispatch('login/loginOut');
									window.location.href = `${window.location.origin}/user/#/?appid=${this.options.appid}`
								}, 1500)
							}
							// 账号未配置公众号
							else if (response.data.code === 1001) {
								this.$showToast(response.data.msg)
							} else {
								this.$showToast(response.data.msg)
							}

						} else {
							this.$showToast('绑定出错,请联系管理员!')
						}
					}).catch(error => {
						uni.hideLoading();
					})
				} catch (e) {}

				this.btnIsLoading = false
			},
		}
	}
</script>

<style lang="scss">
	.login {
		height: 100vh;

		.login-nav {
			position: absolute;
			width: 100vw;
			height: 525rpx;
			background-color: #3C87F6;
			background-size: 100% 100%;

			.content {
				display: flex;
				flex-direction: column;
				margin: 156rpx 0 122rpx;

				.desc {
					margin-top: 25rpx;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.login-form {
				width: 698rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 41, 114, 0.08);
				border-radius: 30rpx;
				margin: 0 auto;
				padding: 74rpx 39rpx 71rpx;


				.form-top {
					font-size: 42rpx;
					font-weight: bold;
					color: #191C1F;
				}

				.form-main {
					margin: 78rpx 0 38rpx;

					::v-deep .u-form-item {
						&:nth-child(1) {
							margin-bottom: 44rpx;
						}

						.u-form-item__body {
							padding: 35rpx 32rpx;
							width: 620rpx;
							background: #F4F6F8;
							border-radius: 20rpx;

							.ipt-place {
								font-size: 32rpx;
								color: #788593;
							}
						}
					}
				}
			}

		}


	}
</style>